<template>
    <div>
        <c-template v-loading="loading" class="mb-lg tf-paragraph">
            <el-row :gutter="24" class="info-row">
                <el-col :span="24" class="detailsTitle mb-0">申请详情</el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row :gutter="24" class="info-row">
                <el-col :span="8">
                    出口申请单号：<span>{{orderInfo.sellerCarOutApply.id}}</span>
                </el-col>
                <el-col :span="8">
                    出口国家：<span>{{orderInfo.sellerCarOutApply.endHarborCountry}}</span>
                </el-col>
                <el-col :span="8">
                    状态：<span>{{orderInfo.sellerCarOutApply.status == null ? "": outApplyStatus[orderInfo.sellerCarOutApply.status].label}}</span>
                </el-col>
                <el-form ref="form" :model="form" label-width="80px">
                    <el-col :span="8">
                        <el-form-item label="起运港：">
                            <el-select v-model="form.startHarborId" placeholder="请选择起运港" :disabled="orderInfo.sellerCarOutApply.status == 1 ? false:true">
                                <el-option v-for="item in harborList" :key="item.id" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="目的港：">
                            <el-select v-model="form.endHarborId" placeholder="请选择目的港" :disabled="orderInfo.sellerCarOutApply.status == 1 ? false:true">
                                <el-option v-for="item in harborList" :key="item.id" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
        </c-template>
        <c-template v-loading="loading" class="mb-lg tf-paragraph">
            <el-row :gutter="24" class="info-row">
                <el-col :span="24" class="detailsTitle mb-0">出口车辆基本信息</el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row :gutter="24" class="info-row">
                <el-col :span="24">
                    <el-table :header-cell-style="{ background: '#F1F1F1', color: '#092132' }" :data="orderInfo.outCarList" v-loading="loading">
                        <el-table-column label="序号" width="80" align="center" type="index" />
                        <el-table-column width="" label="车辆信息" align="center" prop="carInfo" />
                        <el-table-column width="" label="单价" align="center" prop="price" />
                        <el-table-column width="" label="车架号" align="center" prop="vin" />
                    </el-table>
                </el-col>
            </el-row>
        </c-template>
        <!--出口信息 -->
        <c-template v-loading="loading" class="mb-lg tf-paragraph" v-if="orderInfo.transportList != null">
            <el-row :gutter="24" class="info-row">
                <el-col :span="18" class="detailsTitle mb-0">海运信息</el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row :gutter="24" class="info-row">
                <el-col :span="8">
                    海运提单号：<span>{{orderInfo.transportList.seaBillNo}}</span>
                </el-col>
                <el-col :span="8">
                    船名：<span>{{orderInfo.transportList.shipName}}</span>
                </el-col>
                <el-col :span="8">
                    航次：<span>{{orderInfo.transportList.shipNo}}</span>
                </el-col>
                <el-col :span="8">
                    出口日期：<span>{{orderInfo.transportList.exportDate | dateYMDHMSFormat}}</span>
                </el-col>
                <el-col :span="8">
                    预计到港日期：<span>{{orderInfo.transportList.estimateArrivalDate | dateYMDHMSFormat}}</span>
                </el-col>
                <el-col :span="24">
                    <el-table :header-cell-style="{ background: '#F1F1F1', color: '#092132' }" :data="orderInfo.transportContainerList" v-loading="loading">
                        <el-table-column label="序号" align="center" width="80" type="index" />
                        <el-table-column width="" label="集装箱号" align="center" prop="no" />
                        <el-table-column width="" label="车架号" align="center">
                            <template slot-scope="scope">
                                <span v-for="item in scope.row.vinList" :key="item">{{item}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column width="" label="集装箱重量" align="center" prop="weight" />

                        <el-table-column width="" label="集装箱照片" align="center">
                            <template slot-scope="scope">
                                <el-image style="width: 18px; height: 16px" :src="iconUrl" :preview-src-list="scope.row.packingPicList">
                                </el-image>查看

                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
                <el-col :span="24">
                    <el-table :header-cell-style="{ background: '#F1F1F1', color: '#092132' }" :data="orderInfo.transportFiles" v-loading="loading">
                        <el-table-column label="序号" align="center" width="80" type="index" />
                        <el-table-column width="" label="文件名称" align="center" prop="fileName" />
                        <el-table-column width="" label="文件类型" align="center">
                            <template slot-scope="scope">
                                {{exportFileType[scope.row.type].label}}
                            </template>
                        </el-table-column>
                        <el-table-column width="" label="操作" align="center">
                            <template slot-scope="scope">
                                <el-link type="primary" @click="handleOpenFile(scope.row.fileUrl)" v-if='scope.row.fileUrl != null' :underline="false">查看</el-link>
                                <el-link v-else :underline="false">-</el-link>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </c-template>
        <!--金额明细 -->
        <c-template v-loading="loading" class="mb-lg tf-paragraph">
            <el-row :gutter="24" class="info-row">
                <el-col :span="18" class="detailsTitle mb-0">金额明细</el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row :gutter="24" class="info-row">
                <el-col :span="24">
                    <el-table :header-cell-style="{ background: '#F1F1F1', color: '#092132' }" :data="orderInfo.billList" v-loading="loading">
                        <el-table-column width="" label="费用名称" align="center">
                            <template slot-scope="scope">
                                {{scope.row.type == null ? "" : billStatus[scope.row.type].label}}
                            </template>
                        </el-table-column>
                        <el-table-column width="" label="金额（元）" align="center" prop="amount" />
                        <el-table-column width="" label="状态" align="center">
                            <template slot-scope="scope">
                                {{scope.row.status == null ? "" : payStatus[scope.row.status].label }}
                            </template>
                        </el-table-column>
                        <el-table-column width="" label="付款凭证" align="center">
                            <template slot-scope="scope">
                                <el-link type="primary" @click="handleOpenFile(scope.row.payProofUrl)" v-if='scope.row.payProofUrl != null' :underline="false">查看</el-link>
                                <el-link v-else :underline="false">-</el-link>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </c-template>

        <!-- 保证金明细 -->
        <c-deposit-details ref="cDepositDetails" />
        <!-- 审批流 -->
        <c-template class="tf-paragraph">
            <el-row :gutter="24" class="info-row">
                <el-col :span="24" class="detailsTitle mb-0">审批意见</el-col>
            </el-row>
            <el-divider></el-divider>
            <c-approval-process :status="orderInfo.sellerCarOutApply.status" :id="id" @isLoading="changeLoading" :isView="isView" ref="approvalProcess" :startHarborId="form.startHarborId" :endHarborId="form.endHarborId"></c-approval-process>
        </c-template>
    </div>
</template>
<script>
import cDepositDetails from "./components/c-deposit-details.vue";
import cApprovalProcess from './components/c-approval-process.vue';
import { outApplyStatus, billStatus, marginStatus, exportFileType } from "@/utils/status.js";
export default {
    components: {
        cDepositDetails,
        cApprovalProcess
    },
    data () {
        return {
            iconUrl: require("@/assets/img/icon_Attachment@2x.png"),
            exportFileType: exportFileType,
            loading: false,
            outApplyStatus: outApplyStatus,
            billStatus: billStatus,
            payStatus: marginStatus,
            orderInfo: {
                sellerCarOutApply: {},
                outCarList: [],
                transportList: {}
            },
            harborList: [],
            id: "",
            isView: true,
            form: {
                startHarborId: "",
                endHarborId: ""
            }
        };
    },
    mounted () {
        this.getInfo()
    },
    methods: {
        changeLoading (loading) {
            this.isView = true
            this.loading = loading
        },
        handleDepositDetails () {
            this.$refs.cDepositDetails.handleOpen(this.orderInfo.outCarList);
        },
        handleOpenFile (filePath) {
            if (filePath) {
                window.open(filePath);
            } else {
                this.$message.warning("服务器地址不存在");
            }
        },
        async getInfo () {
            if (this.$route.query.id) {
                this.isView = eval(this.$route.query.isView)
                this.id = this.$route.query.id
                const params = {
                    id: this.$route.query.id,
                };
                this.loading = true;
                this.orderInfo = await this.$get({ url: "/sellerCarOutApply/getById", params })
                this.form.startHarborId = this.orderInfo.sellerCarOutApply.startHarborId;
                this.form.endHarborId = this.orderInfo.sellerCarOutApply.endHarborId;
                let harborList = await this.$get({ url: "/ShopHarborInfo/getAllHarborInfo", params })
                harborList.forEach((item) => {
                    this.harborList.push({
                        value: item.id,
                        label: item.harbor
                    })
                })

                this.loading = false;
                this.$refs.approvalProcess.getFlowsList()
            }
        },
    },
};
</script>
<style scoped lang="scss">
.imgList {
    display: flex;
    .el-image {
        width: 30%;
        margin: 0 auto;
    }
}
</style>